

function loadStudentList(){
    $.ajax({
        url:"/api/student/list"
    }) .done(function (data){
        // console.log(data)
        let html="";
        data.forEach((element, index) => {
            html+="<tr>"
            html+="<td>"+element.id+"</td>"
            html+="<td>"+element.name+"</td>"
            html+="<td>"+element.sex+"</td>"
            html+="<td>"+element.age+"</td>"
            html+="<td>"+element.sno+"</td>"
            html+="<td><a href='#' onclick='showStudenDlg("+element.id
                +")'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById("+
                +element.id+")'>删除</a></td>"


            html+="</tr>"

        })
        $("#studentTb").html(html)
    });
}
let layerIndex;
function showStudenDlg(id){
    let title = "新增学生"
    if(id){
        //编辑学生
        title = "编辑学生"
        $("#formId").css("display","block");
        //读取学生信息并赋值
        $.ajax({
            url:"/api/student/"+id,
            method: "GET"
        }).done(result=>{
            console.log(result)

            $.each(result,function (key,value){
                var field= $('#studForm [name="'+ key + '" ]');

                if(field.is(':radio')){
                    field.filter('[value="'+value+'"]').prop('checked',true);
                }else if(field.is('checkbox')){
                    field.prop('checked',value==="yes");
                }else {
                    field.val(value);
                }
            });

        })
    }
    else{
        //新增学生
        $("#studForm")[0].reset();
        $("#formId").css("display","none");

    }
    layerIndex = layer.open({
        type:1,
        title:title,
        area:['520px','auto'],
        content:$('#studForm')//捕获层
    });
}

function getSearchCondtion(){
    let formData = {}
    $('#queryForm').find('input,select').each(function (){
        let name = $(this).attr('name');
        let value = $(this).val();


        if(name&&value){
            formData[name]=value;
        }
    });

    return formData
}

layui.use(function (){
    //(1)验证表单是否合法
    layui.form.on('submit(stud-dlg)',function (data){
        event.preventDefault();//阻止表单默认提交

        commitStuDlg();
    })
    //(2)表格初始化

    const table = layui.table;
    let student = getSearchCondtion();

    table.render({
        elem:'#tbStudent',
        url:'/api/student/getbypage',

        method:"POST",
        contentType:'application/json',
        where:{"data":student},

        page:true,
        cols:[[
            {type: 'checkbox',flexd:'left'},
            {field:'id',flexd: 'left',width:80,title:'id',sort:true},
            {field: 'name',title: '姓名'},
            {
                field: 'sno',
                title: '学号',
                width:150,

            },
            {field: 'sex',width:80,title: '性别',sort:true,
                templet:d=>d.sex===1?'男':(d.sex===2?'女':'未知'),

            },
            {field: 'age',width: 100,title: '年龄',sort: true},
            {field: 'right',title:'操作',width: 134,minWidth:125,templet:'#editTemplate'}
        ]],
        done:function (rs){
            //console.log(rs)
        }
    });

    table.on('tool(tbStudent)',function (obj){
        var data = obj.data;
        if(obj.event==='edit'){
            layer.open({
                title:'编辑 - id'+data.id,
                type:1,
                area:['80%','80%'],
                content:'<div style="padding: 16px">自定义表单元素</div>'
            });
        }
    });

});

function commitStuDlg(){

    let id = $("#id").val()
    let formData = $("#studForm").serialize();
    if(id!=null&&id!=""){
        //是更新学生

        $.ajax({
            url:"/api/student/gengxin",
            method:"PUT",
            data:formData
        }).done(result=>{
            console.log(result);
            if(result.id){

                //读取并刷新原来的读学生列表
                loadStudentList();

                //关闭弹出层
                console.log("add success!")
                if(layerIndex)
                    layer.close(layerIndex)

            }

        }).fail((jqXHR, textStatus, errorThrown)=>{
            console.error("Request failed"+textStatus+"-"+errorThrown);
            alert("an error occurred. Please try again");
        });
    }else {
        //新增学生需要进行

        //将表单数据发送到服务器中的insert中，把提交按钮变灰

        $.ajax({
            url:"/api/student/add",
            method:"POST",
            data:formData
        }).done(result=>{
            console.log(result);
            if(result.id){

                //读取并刷新原来的读学生列表
                loadStudentList();

                //关闭弹出层
                console.log("add success!")
                if(layerIndex)
                    layer.close(layerIndex)

            }

        }).fail((jqXHR, textStatus, errorThrown)=>{
            console.error("Request failed"+textStatus+"-"+errorThrown);
            alert("an error occurred. Please try again");
        });

    }



    $("#btnOk").prop("disabled",true).addClass("layui-btn-disabled");//禁用按钮


}


function deleteConfirm(){
    const table = layui.table;
    const checkStatus = table.checkStatus('tbStudent');
    console.log(checkStatus)
}


function search(){
    let student = getSearchCondtion();
    const table = layui.table;
    table.reloadData("tbStudent",{
        where: {data:student}
    });
    console.log("Whrere condition:"+JSON.stringify(student))
}

function  deleteById(id){
    //删除
    layer.confirm('你真的要删除吗？一旦删除不可恢复！', {icon: 3}, function(){

        $.ajax({
            url:"/api/student/shanchu/"+id,
            method:"DELETE"
        }).done(result=>{
            loadStudentList();
        })
        layer.closeAll();

    }, function(){

    });
}